<script setup>
import {storeToRefs} from 'pinia'
import {useRoute,useRouter} from 'vue-router'
import {ref,computed} from 'vue'

import Product from '@/components/shop/Product.vue'
import ShopInfo from '@/components/shop/ShopInfo.vue'
import useShopStore from '@/stores/shopStore.js'
import CartBottom from '@/components/shop/CartBottom.vue'

const shopStore = useShopStore()
// console.log(shopStore.shopList[0].id);
const {shopList} = storeToRefs(shopStore)
const route = useRoute()
const router = useRouter()
// console.log(route.query.id);
// console.log(shopList.value);
const shopInfo = shopList.value.find(item =>{return item.id == route.query.id})
// console.log(shopInfo);

//商品导航高亮
const isShow = ref(0)
const getIsShow = (id)=>{
    isShow.value = id
}

//利用计算属性自带的监听
//通过当前高亮的导航获取对应的数据,再传给商品组件
    const productList = computed({
    get:()=>{
        let arr = []
    if(isShow.value == 0){
        shopInfo.category.forEach(item => {
            // 数组展开符，将所有数组拼接在一起
            arr =  [...arr,...item.list]
       }); 
    //    console.log(arr);
       return arr
    }else{
        arr = shopInfo.category.find(item=>{
            return item.id == isShow.value
        })
        // console.log(arr.list);
        return arr.list
    }
    },
    set: (value)=>{
        console.log(value);
        return productList.value = value
    }
    
})


// 返回
const back = ()=>{
    router.go(-1)
}

//搜索
const selproduct = ref('')

const getSelproduct = ()=>{
    console.log(selproduct.value);
    if(selproduct.value){
        const reg = new RegExp(`${selproduct.value}`)
        productList.value = productList.value.find(item =>{
            return reg.test(item.title)
        })
        
    }
}



</script>

<template>
    <div class="shop">
        <!-- 搜索 -->
        <div class="search">
            <span class="iconfont search_back"  @click="back">&#xe697;</span>
            <div class="search_content" @keyup.enter="getSelproduct">
                <span class="iconfont search_content_icon">&#xe632;</span>
                <input type="text" class="search_content_input" placeholder="请输入商品名称" v-model="selproduct">
            </div>
        </div>
        <!-- 商店信息 -->
        <div class="shop_info">
            <!-- 商店组件 -->
            <shopInfo  :shopInfo="shopInfo"/>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="category">
                <!-- 商品导航 -->
                <div class="category_item" :class="{'category_item--active':isShow==0}" @click="isShow=0">全部商品</div>
                <div class="category_item" v-for="item in shopInfo.category" :key="item.id"  
                :class="{'category_item--active':isShow==item.id}" @click="getIsShow(item.id)">
                    {{item.name}}
                </div>
            </div>
            <div class="product" >
                <div v-for="item in productList" :key="item.id">
                    <!-- 商品组件商品组件商品组件 -->
                    <Product :product="item" :shopInfoName="shopInfo.name"/>
                </div>
            </div>
        </div>
        <!-- 购物车底部 -->
        
        <CartBottom :shopInfoName="shopInfo.name"/>
        
        
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.shop {
    //搜索
    .search {
        margin: .18rem;
        display: flex;
        align-items: center;

        &_back {
            font-size: .24rem;
            margin-right: .08rem;
            color: #b6b6b6;
        }
        &_content {
            flex: 1;
            height: .32rem;
            background-color: #f5f5f5;
            border-radius: .16rem;
            display: flex;
            align-items: center;

            &_icon {
                color: #b6b6b6;
                margin: 0 .12rem;
            }
            &_input {
                border: none;
                outline: none;
                background: none;
                width: 100%;
                height: .32rem;
            }
        }
    }
    //商店信息
    .shop_info {
        margin: 0 .18rem;
    }
    // 内容
    .content {
        position: absolute;
        left: 0;
        right: 0;
        top: 1.7rem;
        bottom: .5rem;
        display: flex;

        .category {
            overflow-y: scroll;
            width: .78rem;
            background-color: #f5f5f5;

            &_item {
                line-height: .4rem;
                font-size: .14rem;
                text-align: center;
                color: $content_fontcolor;

                &--active {
                    background-color: $bgColor;
                }
            }
        }
        .product {
            flex: 1;
            overflow-y: scroll;
        }
    }
}
</style>